<template>
  <div class="container">
    <a-card class="general-card" :title="$t('menu.x6Demo.graphEditor')">
      <template #extra>
        <a-link href="https://x6.antv.vision/zh/" target="_blank">
          {{ $t('x6Demo.graphEditor.documentation') }}
        </a-link>
      </template>
      
      <div class="demo-description">
        <a-typography-paragraph>
          {{ $t('x6Demo.graphEditor.description') }}
        </a-typography-paragraph>
        
        <a-alert 
          type="info" 
          :title="$t('x6Demo.graphEditor.features')"
          style="margin-bottom: 16px"
        >
          <template #description>
            <ul>
              <li>{{ $t('x6Demo.graphEditor.feature1') }}</li>
              <li>{{ $t('x6Demo.graphEditor.feature2') }}</li>
              <li>{{ $t('x6Demo.graphEditor.feature3') }}</li>
              <li>{{ $t('x6Demo.graphEditor.feature4') }}</li>
              <li>{{ $t('x6Demo.graphEditor.feature5') }}</li>
            </ul>
          </template>
        </a-alert>
      </div>

      <X6Editor />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import X6Editor from '@/components/x6-editor/index.vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

<script lang="ts">
export default {
  name: 'GraphEditor',
};
</script>

<style scoped>
.container {
  background-color: var(--color-fill-2);
  padding: 16px 20px;
  padding-bottom: 0;
}

.demo-description {
  margin-bottom: 20px;
}

.demo-description ul {
  margin: 0;
  padding-left: 20px;
}

.demo-description li {
  margin-bottom: 4px;
}
</style>